<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="营销视频" placeholder bgColor="#fff"></u-navbar>
    <view class="center">
      <video class="video-play"
        :src="form.url" 
        poster="https://guoranfile.oss-cn-beijing.aliyuncs.com/upload/2025/10/07/1759835621202_895.png" 
        :title="form.title" 
        show-fullscreen-btn
        show-mute-btn 
        enable-play-gesture
      />
    </view>
    <view class="btn-list" v-if="shareFlag === ''">
      <view class="btn1" @click="share(true)">
        <image style="width: 28rpx;height: 28rpx;display: block;" src="../../static/my/promotionPoster1.png" mode="widthFix" />
        <text>分享</text>
      </view>
    </view>
    <view class="goods-info" v-if="form.productId" @click="jumpTo('/pages/goodsDetail/goodsDetail?id='+form.productId)">
      <image style="width: 180rpx;height: 180rpx;flex-shrink: 0;border-radius: 8rpx 0rpx 0rpx 8rpx;" :src="form.subtitle ? form.subtitle.split(',')[0] : ''" mode="aspectFill" />
      <view class="u-flex-1 u-flex u-flex-column u-col-top u-row-between">
        <view class="name u-line-2">{{ form.productTitle }}-{{ form.skuName }}</view>
        <view class=" u-flex u-row-between" style="width: 100%;">
          <view class="price"><text>¥</text> {{ form.priceCents }}</view>
          <view class="num">仅剩{{ form.totalInventory }}件</view>
        </view>
      </view>
    </view>
    <view class="p-wxcode" v-if="wechatQrCode" @click="showDetail=true">
      <image src="../../static/my/wxcode.png" />
    </view>
    <u-popup :show="showDetail" :round="20" mode="center" @close="showDetail=false" :safeAreaInsetBottom="false">
      <view style="padding: 40rpx;">
        <image style="width: 420rpx;height: 573rpx;" :src="wechatQrCode" />
      </view>
		</u-popup>
  </view>
</template>

<script>
import { wxShare } from '@/common/util'
import { getMaterialsInfo, saveLogInfo, editLogInfo } from "@/api/index";
let times = null;
let time = 0;

export default {
  data() {
    return {
      showDetail: false,
      id: '',
      form: {},
      shareFlag: '',
      userId: '',
      load: false,
      logId: '',
      goodsInfo: {},
      wechatQrCode: "",
    };
  },
  async onLoad(options) {
    if(options.shareFlag) {
      this.shareFlag = options.shareFlag
      this.userId = options.userId
    }
    if(options.wechatQrCode) {
      this.wechatQrCode = options.wechatQrCode
    }
    if(options.invitationCode) {
      uni.setStorageSync('invitationCode', options.invitationCode)
    }
    if(options.id) {
      this.id = options.id
			uni.setStorageSync("invitationUrl", window.location.pathname + window.location.search);
      await this.getForm()
			uni.removeStorageSync("invitationUrl");
    }
  },
  methods: {
    async down() {
      uni.showLoading({ mask: true })
      const link = document.createElement('a');
      link.href = this.form.url.split(',')[0];
      link.setAttribute('download', '视频.mp4');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      uni.hideLoading()
    },
    share(f) {
      const userInfo = uni.getStorageSync('userInfo')
      const shareInfo = {
        title: this.form.title,
        link: this.httpUrl + `/pages/my/marketingVideoDetail?id=${this.id}&shareFlag=1&userId=${userInfo.userId}`,
        imgUrl: this.form.url.split(',')[0],
      }
      shareInfo.link = shareInfo.link + '&invitationCode=' + userInfo.invitationCode
      if(userInfo.wechatQrCode) {
        shareInfo.link = shareInfo.link + '&wechatQrCode=' + userInfo.wechatQrCode
      }
      wxShare(shareInfo, f)
    },
    async getForm() {
      await getMaterialsInfo({id: this.id}).then(res => {
        this.form = res.data
        document.title = res.data.title
        if (this.shareFlag) {
          const parameter = {
            customerId: uni.getStorageSync("userInfo")
              ? uni.getStorageSync("userInfo").userId
              : "",
            promoterId: this.userId,
            materialId: this.id,
            actionType: "1",
            os: this.getOS(),
            deviceName: this.getDeviceName(),
            durationSeconds: time || 3,
            actionDesc: `浏览了【营销视频】中的【${this.form.title}】停留了${time || 3}秒`,
          };
          saveLogInfo(parameter).then(res => {
            this.logId = res.data + ''
          });
          times = setInterval(() => {
            time += 1;
          }, 1000);
        }
        this.share()
      })
    },
		// 获取操作系统
		getOS() {
			const ua = navigator.userAgent;
			if (ua.includes("Windows")) return "Windows";
			if (ua.includes("Mac")) return "macOS";
			if (ua.includes("Linux")) return "Linux";
			if (ua.includes("Android")) return "Android";
			if (ua.includes("iOS") || ua.includes("iPhone")) return "iOS";
			return "未知系统";
		},
		// 获取设备名称
		getDeviceName() {
			const ua = navigator.userAgent;
			if (ua.includes("iPhone")) return "iPhone";
			if (ua.includes("iPad")) return "iPad";
			if (ua.includes("Android")) return "Android手机";
			return "电脑设备";
		},
  },
	onBackPress() {
    if(this.load) {
      return
    }
		if (times) {
			clearInterval(times);
			times = null;
		}
		if(this.shareFlag) {
      const parameter = {
        customerId: uni.getStorageSync("userInfo")
          ? uni.getStorageSync("userInfo").userId
          : "",
        promoterId: this.userId,
        materialId: this.id,
        actionType: "1",
        os: this.getOS(),
        deviceName: this.getDeviceName(),
        durationSeconds: time || 3,
        actionDesc: `浏览了【营销视频】中的【${this.form.title}】停留了${time || 3}秒`,
        logId: +this.logId,
      };
      this.load = true
      editLogInfo(parameter);
    }
	},
	beforeDestroy() {
    if(this.load) {
      return
    }
		if (times) {
			clearInterval(times);
			times = null;
		}
		if(this.shareFlag) {
      const parameter = {
        customerId: uni.getStorageSync("userInfo")
          ? uni.getStorageSync("userInfo").userId
          : "",
        promoterId: this.userId,
        materialId: this.id,
        actionType: "1",
        os: this.getOS(),
        deviceName: this.getDeviceName(),
        durationSeconds: time || 3,
        actionDesc: `浏览了【营销视频】中的【${this.form.title}】停留了${time || 3}秒`,
        logId: +this.logId,
      };
      this.load = true
      editLogInfo(parameter);
    }
	},
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 280rpx;
  position: relative;
  .center {
    width: 702rpx;
    margin: 0 auto;
    margin-top: 12rpx;
    position: relative;
    image {
      width: 702rpx;
      height: auto;
      display: block;
    }
    video {
      width: 100%;
      height: 80vh;
    }
    .play {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0,0,0,0.4);
    }
  }
  .btn-list {
    width: 702rpx;
    display: flex;
    justify-content: center;
    margin: 20rpx auto;
    .btn1 {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8rpx;
      width: 560rpx;
      height: 80rpx;
      background: #FFFFFF;
      border-radius: 200rpx;
      border: 2rpx solid #56CB03;
      font-size: 28rpx;
      color: #56CB03;
    }
    .btn2 {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8rpx;
      width: 398rpx;
      height: 80rpx;
      background: #56CB03;
      border-radius: 200rpx;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }
  .goods-info {
    position: fixed;
    left: 24rpx;
    bottom: 60rpx;
    width: 702rpx;
    height: 180rpx;
    background: #fff;
    border-radius: 12rpx;
    display: flex;
    gap: 20rpx;
    padding: 0 28rpx 16rpx 0;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(86, 92, 92, 0.2);
    z-index: 10;
    .name {
      padding-top: 14rpx;
      font-size: 28rpx;
      color: #000000;
      line-height: 44rpx;
    }
    .price {
      font-weight: 500;
      font-size: 28rpx;
      color: #E20300;
      text {
        font-size: 24rpx;
      }
    }
    .num {
      font-size: 24rpx;
      color: #818181;
    }
  }
}
</style>
